<template>
  <div class="wrap">
    <el-row>
      <el-col :span="24" class="header-wrap">
        <el-form :inline="true" :model="formInline" :rules="rules"  ref="formInline">
          <el-form-item label="真实姓名" prop="name">
            <el-input v-model="formInline.name" prefix-icon="el-icon-search"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="formInline.phone" prefix-icon="el-icon-search"></el-input>
          </el-form-item>
          <el-form-item label="订单状态" prop="state">
            <el-select v-model="formInline.state" placeholder="请选择订单状态">
              <el-option label="未还款" value="0"></el-option>
              <el-option label="已还款" value="1"></el-option>
              <el-option label="已结清" value="2"></el-option>
              <el-option label="全部" value=""></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search('formInline')">搜索</el-button>
            <el-button type="primary" @click="reset('formInline')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <!--表格-->
      <el-col :span="24">
        <el-table :data="refundOrderList" :border="true" style="width: 100%;min-width: 1200px;">
          <el-table-column label="订单号" align="center" min-width="140px">
            <template slot-scope="scope">
              <span>{{ scope.row.orderNo  }}</span>
            </template>
          </el-table-column>
          <el-table-column label="真实姓名" align="center">user
            <template slot-scope="scope">
              <span>{{ scope.row.realName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="手机号" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.phone }}</span>
            </template>
          </el-table-column>
          <el-table-column label="借款金额" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.loanAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="应还金额" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.repayAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="实际还款金额" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.actualRepayment }}</span>
            </template>
          </el-table-column>
          <el-table-column label="到期日期" prop="expirationTime" :formatter="dateFormat" align="center" min-width="140px;"></el-table-column>
          <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag type="warning" v-if="scope.row.status == 0">未还款</el-tag>
            <el-tag type="info" v-if="scope.row.status == 1">部分还款</el-tag>
            <el-tag type="success" v-if="scope.row.status == 2">已结清</el-tag>
          </template>
        </el-table-column>
          <el-table-column label="备注" align="center">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p style="width: 150px;line-height: 1.5;">{{ scope.row.remark }}</p>
                <div slot="reference" class="name-wrapper">
                  <p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ scope.row.remark }}</p>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" min-width="200px;">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="check(scope.$index, scope.row)">查看</el-button>
              <el-button size="mini" type="primary" @click="sendMsg(scope.$index, scope.row)">发短信</el-button>
              <el-button size="mini" type="primary" @click="remark(scope.$index, scope.row)">备注</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="top"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total='total'>
        </el-pagination>
      </el-col>
      <!--基本详情-->
      <el-dialog title="" :visible.sync="dialogInfoVisible" :close-on-click-modal="false">
        <el-row class="pad">
          <el-col :span="24" class="head-line">查看详情</el-col>
          <el-col :span="24">
            <el-col :span="8">
              <span>订单号：</span>
              <el-tag type="info">{{ info.orderNo }}</el-tag>
            </el-col>
            <el-col :span="8">
              <span>手机号码：</span>
              <el-tag type="info" >{{ info.phone }}</el-tag>
            </el-col>
            <el-col :span="8">
              <span>借款人姓名：</span>
              <el-tag type="info" >{{ info.realName }}</el-tag>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="8">
              <span>借款期限(天)：</span>
              <el-tag type="info">{{ info.loanTerm }}</el-tag>
            </el-col>
            <el-col :span="8">
              <span>借款金额：</span>
              <el-tag type="info" >{{ info.loanAmount }}</el-tag>
            </el-col>
            <el-col :span="8">
              <span>服务费：</span>
              <el-tag type="info" >{{ info.feeTotal }}</el-tag>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="8">
              <span>实际到账金额：</span>
              <el-tag type="info" >{{ info.actualAmount }}</el-tag>
            </el-col>
            <el-col :span="8">
              <span>借款时间：</span>
              <el-tag type="info" >{{ info.borrowTime }}</el-tag>
            </el-col>
            <el-col :span="8">
              <span>到期时间：</span>
              <el-tag type="info" >{{ info.expirationTime }}</el-tag>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="8">
              <span>应还金额：</span>
              <el-tag type="info" >{{ info.loanAmount }}</el-tag>
            </el-col>
            <el-col :span="8">
              <span>应还款总额：</span>
              <el-tag type="info">{{ info.loanAmount }}</el-tag>
            </el-col>
            <el-col :span="8">
              <span>已还总额：</span>
              <el-tag type="info" >{{ info.actualRepayment }}</el-tag>
            </el-col>
          </el-col>
        </el-row>
      </el-dialog>
      <!--备注-->
      <el-dialog :visible.sync="dialogFormVisible2" width="25%" :close-on-click-modal="false">
        <div slot="title">备注</div>
        <el-form :model="form2">
          <el-form-item label="备注内容">
            <el-input v-model="form2.name" :maxlength="255" type="textarea" :rows="6" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
    </el-row>
  </div>
</template>

<script type="text/ecmascript-6">
  import {post} from '@/utils/http'
  export default {
    data() {
      let validateName = (rule, value, callback) => {
        if (value === '') {
          callback();
        } else {
          callback();
        }
      };
      let validatePhone = (rule, value, callback) => {
        if (value === '') {
          callback();
        } else {
          callback()
        }
      };
      return {
        formInline: {
          name: '',
          phone: '',
          state: ''
        },
        form2: {
          name: ''
        },
        idd: '',
        rules: {
          name: [
            { validator: validateName, trigger: 'blur' }
          ],
          phone: [
            { validator: validatePhone, trigger: 'blur' }
          ]
        },
        info: {},
        refundOrderList: [],
        dialogInfoVisible: false,
        dialogFormVisible2: false,
        currentPage: 1,
        total: 0,
        size: 10,
        textarea: ''
      }
    },
    methods: {
      dateFormat(row,column) {
        let tableTime = row[column.property];
        if (tableTime == undefined) {
          return "";
        }
        return this.moment(tableTime).format("YYYY-MM-DD HH:mm:ss");
      },
      search(formInline) {
        this.$refs[formInline].validate((vaild) => {
          if(vaild) {
            let para = {
              pageIndex: this.currentPage,
              pageSize: this.size
            }
            if(!this.formInline.name.replace(/\s/g, "") == '') {
              para.realName = this.formInline.name.replace(/\s/g, "")
            }
            if(!this.formInline.phone.replace(/\s/g, "") == '') {
              para.phone = this.formInline.phone.replace(/\s/g, "")
            }
            if(!this.formInline.state == '') {
              para.status = this.formInline.state
            }
            post('/api/manager/v1/loan/getRepayOrderList',para).then((response) => {
              this.refundOrderList = response.data.data;
              this.total = response.data.totalCount;
              this.size = response.data.pageSize;
            })
          }
        })
      },
      reset(formInline) {
        this.$refs[formInline].resetFields();
      },
      getList() {
        post('/api/manager/v1/loan/getRepayOrderList',{pageIndex: this.currentPage,pageSize: this.size}).then((response) => {
          this.refundOrderList = response.data.data;
          this.total = response.data.totalCount;
          this.size = response.data.pageSize;
        })
      },
      handleSizeChange(val) {
        this.size = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.currentPage =val;
        this.getList();
      },
      check(index, row) {
        this.dialogInfoVisible = true;
        post('/api/manager/v1/loan/getRepayOrderDetail',{id: row.id}).then((response) => {
          response.data.borrowTime = this.moment(response.data.borrowTime).format("YYYY-MM-DD HH:mm:ss")
          response.data.expirationTime = this.moment(response.data.expirationTime).format("YYYY-MM-DD HH:mm:ss")
          this.info = Object.assign({}, response.data);
        })
      },
      sendMsg(index,row) {
        this.$confirm('确定要发送短信', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          post('/api/manager/v1/loan/repaySendSMS',{id: row.id}).then((response) => {
            this.$message({
              type: 'success',
              message: '发送成功!'
            });
          })
        })
      },
      remark(index,row) {
        this.dialogFormVisible2 = true;
        this.idd = row.id;
      },
      submit() {
        post('/api/manager/v1/loan/repayrRemark',{id: this.idd,remark: this.form2.name}).then((response) => {
          this.getList();
          this.dialogFormVisible2 = false;
          this.form2.name = '';
        })
      }
    },
    mounted(){
      this.getList();
    }
  }
</script>

<style lang='scss' scoped>
  .wrap {
    /*padding: 20px;*/
    .header-wrap{
      margin-bottom: 60px;
      background-color: #66BFBF;
      border-radius: 6px;
    }
    .el-form-item {
      margin-top: 22px;
      margin-left: 22px;
    }
    .pad {
      padding-top: 20px;
      .head-line {
        background-color: #66BFBF;
        height: 40px;
        line-height: 40px;
        border-radius: 6px;
        padding-left: 20px;
        margin-bottom: 50px;
        font-size: 20px;
      }
      .el-col {
        margin-top: 10px;
        margin-bottom: 10px;
      }
    }
    .top {
      margin-top: 20px;
      float: right;
    }
  }
</style>
